<template>
    <main class="basic-info">
      <div class="basic-info-content">
        <h1>基本资料</h1>
        <el-form ref="form" :rules="rules" :model="form" label-width="90px">
          <div class="basic-info-box">
            <div class="basic-info-left">

              <el-form-item label="当前头像:">
                <img class="BIL-avatar" :src="form.photo?form.photo:'/static/personal/img/defaultAvatar.png'" alt="">
              </el-form-item>

              <el-form-item label="真实姓名:" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>

               <el-form-item label="性别:" prop="sex">
                  <el-radio-group v-model="form.sex">
                    <el-radio class="nan" :label="1" value=1>男</el-radio>
                    <el-radio :label="2" value=2>女</el-radio>
                  </el-radio-group>
              </el-form-item>

              <div class="flex">
                <el-form-item label="手机号码:" prop="phone">
                  <el-input maxlength="11" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="身份证:" prop="id_card">
                  <el-input v-model="form.id_card" maxlength="18"></el-input>
                </el-form-item>
              </div>

              <div class="flex">
                <el-form-item label="区域:" prop="region_id">
                  <el-select v-model="form.region_id" placeholder="请选择区域" @change="regionChange">
                    <el-option v-for="item in region" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="门店:" prop="store_id">
                  <el-select v-model="form.store_id" placeholder="请选择门店" @change="storeChange">
                    <el-option v-for="item in store" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="flex flex-grow">
                <el-form-item label="组别:" prop="group_id">
                  <el-select v-model="form.group_id" placeholder="请选择组别">
                    <el-option v-for="item in group" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label-width='' label="职务:" prop="job_id">
                  <el-select v-model="form.job_id" placeholder="请选择职务">
                    <el-option v-for="item in job" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="entry_channel" label="入职渠道:" prop="entry_channel_id">
                  <el-select v-model="form.entry_channel_id" placeholder="请选择渠道">
                    <el-option v-for="item in entry_channel" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="flex">
                <el-form-item label="微信:">
                  <el-input v-model="form.we_chat"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
              </div>

            </div>
            <div class="line"></div>
            <div class="basic-info-right">
              <form >
                <p class="up-avatar-tit">选择本地照片，上传自己的头像</p>

                <div class="up-img">
                  <el-upload
                    class="avatar-uploader"
                    ref="upload"
                    :headers="token"
                    name='photo'
                    action="http://men.wuyoufang.com/api/index/user/upload_photo"
                    :show-file-list="false"
                    :auto-upload="false"
                    :on-success="handleAvatarSuccess"
                    :on-change="handlePreview"
                    :before-upload="beforeAvatarUpload">
                    <img class="avatar-img" :src="imageUrl || '/static/personal/img/uploadAvatar.png'" alt="">
                  </el-upload>

                  <!-- <input type="file" @change="upAvatar"  accept="image/gif,image/jpeg,image/jpg,image/png" name="" id=""> -->
                </div>

                <div> 
                  <el-button class="up-img-btn" @click="submitUpload" type="primary">上传图片</el-button>
                  <span>图片支持JPG、GIF、PNG格式，且文件小于2M</span>
                </div>
              </form>

              <p class="preview-tit">头像预览</p>

              <div class="flex preview-avatar">
                <div class="big-img">
                  <div>
                    <img :src="imageUrl" alt="">
                  </div>
                  <p>大头像100x100像素</p>
                </div>
                <div class="smail-img">
                  <div>
                    <img :src="imageUrl" alt="">
                  </div>
                  <p>小头像60x60像素</p>
                </div>
              </div>
            </div>
          </div>

          <div class="submit-btn">
            <el-button class="btn" type="primary" @click="submitForm('form')">保存</el-button>
          </div>
        </el-form>
      </div>
    </main>
</template>

<script>
export default {
  name: "basicInfo",
  data() {
    return {
      token: { token: localStorage.token },
      imageUrl: "",
      form: {
        photo: "",
        name: "",
        sex: 1,
        phone: "",
        id_card: "",
        region_id: "",
        store_id: "",
        group_id: "",
        job_id: "",
        entry_channel_id: "",
        we_chat: "",
        email: ""
      },
      rules: {
        name: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { len: 11, message: "手机号码为11位数字", trigger: "blur" }
        ],
        id_card: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          { len: 18, message: "请输入18位身份证号码", trigger: "blur" }
        ],
        region_id: [{ required: true, message: "请选择区域", trigger: "blur" }],
        store_id: [{ required: true, message: "请选择门店", trigger: "blur" }],
        group_id: [{ required: true, message: "请选择组别", trigger: "blur" }],
        job_id: [{ required: true, message: "请选择职务", trigger: "blur" }],
        entry_channel_id: [
          { required: true, message: "请选择入职渠道", trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      },
      job: [], // 职务下拉
      entry_channel: [], // 入职渠道
      region: [], // 区域列表
      store: [], // 门店列表
      group: [], // 组别列表
      fileList: []
    };
  },
  created() {
    // 获取用户信息
    this.$http
      .get("/index/user")
      .then(res => {
        // console.warn(res);
        this.form = res.data;
      })
      .catch(err => {});

    // 获取下拉列表
    this.$http
      .get("/index/user/save_select_item")
      .then(res => {
        // console.warn(res);
        this.job = res.data.job;
        this.entry_channel = res.data.entry_channel;
      })
      .catch(err => {});

    // 获取区域
    this.run();
  },
  methods: {
    // 获取区域
    async getDepartment(id = 0) {
      let that = this;
      return new Promise(function(resolve, reject) {
        that.$http
          .get("/index/department", {
            params: {
              id
            }
          })
          .then(response => {
            resolve(response);
          })
          .catch(err => {
            reject("请求失败");
          });
      });
    },
    async run() {
      let response1 = await this.getDepartment();
      // console.log('response1',response1.data)
      this.region = response1.data;

      let response2 = await this.getDepartment(response1.data[0]["id"]);
      // console.log('response2',response2.data)
      this.store = response2.data;

      let response3 = await this.getDepartment(response2.data[0]["id"]);
      // console.log('response3',response3.data);
      this.group = response3.data;
    },

    // 预览
    handlePreview(file) {
      this.imageUrl = file.url;
      let list = [
        {
          name: file.name,
          url: file.url
        }
      ];
      this.fileList = list;
    },

    // 上传
    submitUpload() {
      this.$refs.upload.submit();
    },

    // 上传之前验证
    beforeAvatarUpload(file) {
      let isJPG = false;
      if (
        file.type == "image/jpeg" ||
        file.type == "image/jpg" ||
        file.type == "image/png" ||
        file.type == "image/gif"
      ) {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG、GIF、PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 上传图片成功
    handleAvatarSuccess(res, file, fileList) {
      // console.log(res);
      if (res.status === 1) {
        this.form.photo = res.data;
      }
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    // 选择区域
    regionChange(e) {
      // console.log(e)
      let that = this;
      async function run() {
        let response2 = await that.getDepartment(e);
        // console.log('response2',response2.data)
        that.store = response2.data;
        that.form.store_id = response2.data[0].id;

        let response3 = await that.getDepartment(response2.data[0]["id"]);
        // console.log('response3',response3.data);
        that.group = response3.data;
        that.form.group_id = response3.data[0].id;
      }
      run();
    },

    // 选择门店
    storeChange(e) {
      let that = this;
      async function run1() {
        let response3 = await that.getDepartment(e);
        that.group = response3.data;
        that.form.group_id = response3.data[0].id;
      }
      run1();
    },

    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let form = this.form;
          // console.log(form)
          this.$http
            .post("/index/user/edit/0", form)
            .then(res => {
              console.log(res.data.status);
              if (res.data.status == 1) {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(err => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.flex {
  display: flex;
}
.flex-grow {
  flex-grow: 1;
}
.basic-info {
  box-sizing: border-box;
  position: fixed;
  top: 123px;
  left: 120px;
  width: calc(100vw - 120px);
  height: calc(100vh - 123px);
  padding: 10px 20px;
  background: #e8e8e8;
  padding-bottom: 51px;
  overflow-y: scroll;
}
.basic-info-content {
  background: #fff;
}
.basic-info-content h1 {
  padding: 10px 20px;
  background: #f5f5f7;
  border: 1px solid #ddd;
  color: #333;
  font-weight: 500;
}
.basic-info-box {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.basic-info-box .line {
  width: 1px;
  background: #eee;
  margin: 0 20px;
}
.basic-info-left,
.basic-info-right {
  width: calc((100% - 41px) / 2);
}
.basic-info-left .BIL-avatar {
  width: 117px;
  height: 117px;
  border: 2px solid #ddd;
}
.nan {
  margin-right: 20px;
}

.submit-btn {
  border-top: 1px solid #eee;
  padding: 10px;
  text-align: center;
}
.submit-btn button {
  padding: 5px 30px;
  background: #1590ed;
  border-radius: 0;
}
/* 右侧 */
.basic-info-right {
  padding-left: 30px;
}
.up-avatar-tit {
  margin-bottom: 10px;
}
.up-img {
  width: 160px;
  height: 160px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.up-img input {
  width: 160px;
  height: 160px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}
.up-img span {
  font-size: 150px;
}
.up-img-btn {
  margin-top: 15px;
  width: 160px;
  background: linear-gradient(#eee, #fff);
  border-color: #ddd;
  color: #333;
  padding: 0;
  margin-right: 15px;
  line-height: 30px;
}
.preview-tit {
  margin-top: 80px;
  font-size: 14px;
}
.preview-avatar {
  margin-top: 10px;
  align-items: flex-end;
}
.big-img div {
  width: 100px;
  height: 100px;
  margin: 0 100px 10px 0;
  border: 1px solid #ddd;
  background: #eee;
}
.smail-img div {
  width: 60px;
  height: 60px;
  border: 1px solid #ddd;
  background: #eee;
}
.big-img div img,
.smail-img div img {
  width: 100%;
  height: 100%;
}
.up-img .avatar-img {
  width: 160px;
  height: 160px;
}
.avatar-uploader {
  line-height: 0;
}
</style>
<style>
.basic-info-right .avatar-uploader .el-upload--text {
  border: none;
  border-radius: 0;
  line-height: 0;
}
.basic-info-left .el-input {
  width: 150px;
}
.basic-info-left .el-form-item.is-success .el-input__inner {
  border-radius: 0;
  border-color: #d3d3d3;
}
.basic-info-left .entry_channel {
  margin-left: 20px;
}
@media screen and (max-width: 1500px) {
  .basic-info-left .flex-grow .el-input {
    width: 110px;
  }
  .basic-info-left .flex-grow .el-form-item__label {
    width: 80px !important;
  }
  .basic-info-left .entry_channel {
    margin-left: 0;
  }
}
</style>
